<template>
  <div>
    <!-- 2. 点击事件切换is属性的值 -->
    <button @click="name = 'UserAccount'">账号登录</button>
    <button @click="name = 'UserCode'">验证码登录</button>
    <!-- 1. component 设置is属性， is代表显示组件的注册名称 -->
    <component :is="name"></component>
  </div>
</template>

<script>
/*
  学习目标：动态组件的基本使用
  作用: 🔔在同一个位置, 动态切换显示组件
*/

// 前置：0. 使用素材中的组件
// 前置：1. 注册组件，
import UserAccount from "./components/UserAccount.vue";
import UserCode from "./components/UserCode.vue";
export default {
  components: { UserAccount, UserCode },
  data() {
    return {
      // 2. 声明变量name
      name: "",
    };
  },
};
</script>

<style></style>
